<template>
    <div>
        <div>
            <relate-require-energy :detail="detail" :riskData="riskData" :form="form" @handleShowTipModal="handleShowTipModal" />
        </div>
        <flexbox align="flex-start" style="margin-top: 12px">
            <div style="width: 71%; margin-right: 1%">
                <relate-version-energy :detail="detail" :riskData="riskData" @handleShowTipModal="handleShowTipModal" />
            </div>
            <div style="width: 28%">
                <relate-comp-rate :detail="detail" @handleShowTipModal="handleShowTipModal" />
            </div>
        </flexbox>
        <tip-modal ref="tipModalRef" />
    </div>
</template>

<script lang="ts">
import TipModal from './components/TipModal.vue';
import { ReloadOutlined } from '@ant-design/icons-vue';
import { HRangePickerCell, HSearchSelectCell } from '@/components';
import RelateCompRate from './components/RelateCompRate.vue';
import RelateVersionEnergy from './components/RelateVersionEnergy.vue';
import { defineComponent, ref, unref, reactive, toRefs } from 'vue';
import RelateRequireEnergy from './components/RelateRequireEnergy.vue';
export default defineComponent({
    name: 'insideChartsPmpChart',
    components: {
        RelateCompRate,
        RelateVersionEnergy,
        HRangePickerCell,
        HSearchSelectCell,
        TipModal,
        ReloadOutlined,
        RelateRequireEnergy
    },
    props: {
        detail: {
            type: Object,
            default: () => ({})
        },
        riskData: {
            type: Object,
            default: () => ({})
        },
        form: {
            type: Object,
            default: () => ({})
        }
    },
    setup() {
        const searchSelectRef = ref<any>();
        const tipModalRef = ref<any>();
        const state = reactive<any>({
            platform: '0',
            lineOption: {},
            totalTime: 0
        });
        const handleShowTipModal = (type) => {
            unref(tipModalRef).open(type);
        };
        return {
            searchSelectRef,
            tipModalRef,
            ...toRefs(state),
            handleShowTipModal
        };
    }
});
</script>

<style scoped lang="less">
::v-deep(.ant-form-inline) {
    .ant-form-item {
        margin-bottom: 0 !important;
    }
}
</style>